/**
 * Created with Vim7.3 Mac
 * @fileOverview :
 * @author : Lyle lylechen2014@gmail.com
 * @since : 2016-06-02 14:22:18
 * @filename : src/menu.js
 * @version :
 * @description :
 */

import React, { Component } from 'react';
import {
    StyleSheet,
    Text,
    View,
    Image,
    StatusBar,
    Animated,
    Easing,
    TouchableOpacity
} from 'react-native';

import MenuUserInfo from './menuUserInfo';
import MenuList from './menuList';

let offsetWidth = 250;

class Menu extends Component {

    constructor(props) {
        super(props);
        this.state = {
            bar : false,
            menu : 'letsmeet',
            num : new Animated.Value(this.getAnimatedStart()),
        }
    }

    animationFunc(start,end) {
        Animated.spring(start, {
            toValue: end,
            friction:10,
            tension:70,
        }).start();
    }

    animationTimeFunc(start,end,time) {
        Animated.timing(start, {
            toValue: end,
            duration:0,
            delay:time,
        }).start();
    }

    getAnimatedStart(touch) {
        let num = Data.menuOpen ? 0 : -offsetWidth;
        if (touch) {
            num = this.getMenuOffset(touch);
        }
        return num;
    }

    switchMenu(touch) {
        //let num = this.getAnimatedStart(touch);
        //this.state.num.setValue(num);
        if (Data.menuOpen) {
            Data.menuOpen = false;
        } else {
            Data.menuOpen = true;  
        }
        this.animationMenu();
    }

    getMenuOffset(touch) {
        let mx = touch.x2 - touch.x1; 
        let num = 0;
        if (mx < 0) {
            mx = mx < -offsetWidth  ? -offsetWidth : mx;
            num = 0 + mx
        }
        return num
    }

    moveMenu(touch) {
        let num = this.getMenuOffset(touch)
        //this.refs.menuView.setNativeProps({style:{marginLeft:num}});
        this.animationTimeFunc(this.state.num,num,0);
    }

    endMenu(touch) {
        let mx = touch.x2 - touch.x1;
            if (mx > offsetWidth/2) {
                Data.menuOpen = true;
            } else if (mx < 0 && mx < -(offsetWidth/2)) {
                Data.menuOpen = false;
            } else if (mx < 0 && mx > -(offsetWidth/2)) {
                Data.menuOpen = true;
            } else {
                Data.menuOpen = false;
            }
            let num = this.getAnimatedStart(touch);
            this.state.num.setValue(num);
            this.animationMenu();
    }

    animationMenu() {
        if (Data.menuOpen) {
            this.setMenuState();
            this.animationFunc(this.state.num,0);
        } else {
            this.setState({bar:false});
            this.animationFunc(this.state.num,-offsetWidth);
        }
    }

    setMenuState() {
        let menu = Routes[Routes.length-1].toLowerCase();
        this.setState({menu:menu,bar:true});
    }

    render() {
        let menuHead = Store.session_user_id ? <MenuUserInfo {...this.props} that={this} /> : null;
        return (
            <Animated.View ref='menuView' style={[styles.menu,{marginLeft:this.state.num}]} >
                <StatusBar hidden={this.state.bar} barStyle={'light-content'}/>
                {menuHead}
                <MenuList {...this.props} that={this} menu={this.state.menu} />
            </Animated.View>
        );
    }
}


const styles = StyleSheet.create(Css.MenuStyle);

export default Menu;
